import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {Tree, TreeNode} from "./Tree";
import {fromJS, List} from "immutable";
require("./Tree.css");


const CustomLabel = React.createClass({
    getInitialState: function() {
       //console.log(this.props)
        return {           
        };
    },
    onEdit: function(event){
        console.log("onEdit", this.props.nodeId)
        event.stopPropagation();
    },
    render: function(){
        return (
            <span className="cus-label">
                <span>{this.props.title}</span>        
                <div className="tree-actions">
                    {this.props.operation ? <li onClick={this.onEdit} className ="fa fa-trash-o" title="delete"/>: null}
                </div>
            </span>)
    }
});

const FolderTree = React.createClass({
    mixins: [PureRenderMixin],    
    getInitialState: function() {    
        const treeData = fromJS(
        {
            "id": "5523b053-caec-4a47-bb00-44a510c5e743",
            "path": "/",
            "cmis:name": "My Archives",               
            "children": [{
                "id": "874d1791-f0bd-4a24-b17a-cc97ebcba8d9",
                "path": "/12134",
                "cmis:name": "12134",
                "type": "cmis:folder",
                "owner": "sumilux10000",
                "lastModifiedBy": "sumilux10000",
                "creationDate": "2016-04-11T10:09:31.081Z",
                "time": "2016-04-18T06:37:50.332Z",
                "cmis:description": "",    
                "children": [{
                    "id": "60cea8c4-3015-45de-9e9f-eb0cceb43901",
                    "path": "/12134/众",
                    "cmis:name": "众",                                    
                    "children": [{
                        "id": "2737ac99-93eb-4167-bfbe-5a8e61380655",
                        "path": "/12134/众/Reading2",
                        "cmis:name": "Reading2",   
                    }, {
                        "id": "19737e63-420e-4a97-8230-225a1101964d",
                        "path": "/12134/众/folder2",
                        "cmis:name": "folder2",
                        "type": "cmis:folder",
                        "owner": "sumilux10000",
                        "lastModifiedBy": "sumilux10000",
                        "creationDate": "2016-04-26T06:35:09.354Z",
                        "time": "2016-04-26T06:35:09.425Z",
                        "cmis:description": "",  
                    }]
                }]
            }]
        }
      )
        return {
            treeData: treeData
        };
    },
    render: function(){    
        const loop = (children=>{         
             return children.map((node, index)=>{
                  if(node.children){
                      return (<TreeNode key={index} title={node["cmis:name"]}>
                          {loop(node.children)}
                      </TreeNode>);
                 }           
                return  <TreeNode key={index} title={node["cmis:name"]}/>
              });
        });
        let treeNodes = loop(this.state.treeData.get("children").toJS());
        return (
            <Tree ref="tree1" className="tree-solid-line" checkable draggable       
                onExpand={this.onExpand}                  
                onSelect={this.onSelect} 
                onCheck={this.onCheck}
                iconClass="fa-folder fa"> 
                    {treeNodes}
            </Tree>)
    }
})
const Demo = React.createClass({
    propTypes: {
        keys: PropTypes.array,
    },
    getDefaultProps: function() {
        return {
            keys: ['0-0-1-0', '0-0-1', '0-0'],
        };
    },
    getInitialState: function() {
        const keys = this.props.keys;
        return {
            defaultExpandedKeys: keys,
            defaultSelectedKeys: keys,
            defaultCheckedKeys: keys,
            switchIt: true,
        };
    },
    componentDidMount: function(){     
       // this.refs.tree1.checkedNode('0-0-1-0');   
        this.refs.tree1.expandedNode('0-0-1-0');             
    },
    onExpand: function(expandedKeys) {
        console.log('onExpand', expandedKeys, arguments);
    },
    onSelect: function(selectedKeys, info) {
        console.log('selected', selectedKeys, info);
        this.selKey = info.node.props.eventKey;
    },
    onCheck: function(checkedKeys, info) {
        console.log('onCheck', checkedKeys, info);
    },   
  render: function() {
    const customLabelFactory = React.createFactory(CustomLabel);
    return (
        <div>
            <div className="row">
                <div className="col-md-3">
                    <div className="panel">
                        <div className="panel-heading">Tree Style #1</div>    
                        <div className="panel-body">               
                            <Tree ref="tree1" className="tree-solid-line" checkable multiple          
                                onExpand={this.onExpand}                  
                                onSelect={this.onSelect} 
                                onCheck={this.onCheck}
                                iconClass="fa-folder fa">
                                <TreeNode title="Theme" key="0-0" >
                                    <TreeNode title={customLabelFactory({title:"operation", nodeId: "123", operation: true})} key="0-0-0">
                                        <TreeNode title="leaf" key="0-0-0-0" />
                                        <TreeNode title="leaf" key="0-0-0-1" />
                                    </TreeNode>
                                    <TreeNode title="parent 1-1" key="0-0-1" disabled>
                                        <TreeNode title="parent 1-1-0" key="0-0-1-0" disableCheckbox />
                                        <TreeNode iconClass="fa-folder-open fa" title="parent 1-1-1" key="0-0-1-1" disabled/>
                                    </TreeNode>
                                </TreeNode>
                            </Tree>
                        </div>
                    </div>
                </div>
                <div className="col-md-3">
                    <div className="panel">
                        <div className="panel-heading">Tree Style #2</div>    
                        <div className="panel-body">              
                            <FolderTree/>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                <div className="col-md-6">
                    <div className="panel">
                        <div className="panel-heading">Tree Style #1</div>    
                        <div className="panel-body"> 
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <div className="panel">
                        <div className="panel-heading">Tree Style #2</div>    
                        <div className="panel-body">               
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>);
  },
});

var rootInstance = null;
$(function(){   
    rootInstance = ReactDOM.render(<Demo />, document.getElementById('app'));
})

if (module.hot) {
  require('react-hot-loader/Injection').RootInstanceProvider.injectProvider({
    getRootInstances: function () {
      // Help React Hot Loader figure out the root component instances on the page:
      return [rootInstance];
    }
  });
}